<template>
  <div class="request-field">
    <a-form :labelCol="{ span: 7 }" labelAlign="left">
      <a-form-item label="动态数据">
        <a-switch
          v-model:checked="config.config[config.currentIndex].request.dataType"
          :checkedValue="DataType.DYNAMIC"
          :unCheckedValue="DataType.STATIC"
          checked-children="启用"
          un-checked-children="禁用"
        ></a-switch>
      </a-form-item>
      <a-form-item label="请求地址">
        <a-input
          v-model:value="config.config[config.currentIndex].request.url"
        ></a-input>
      </a-form-item>
      <a-form-item label="请求方式">
        <a-select
          v-model:value="config.config[config.currentIndex].request.method"
        >
          <a-select-option :value="ReuqestMethod.GET"
            >{{ ReuqestMethod.GET }}
          </a-select-option>
          <a-select-option :value="ReuqestMethod.POST"
            >{{ ReuqestMethod.POST }}
          </a-select-option>
          <a-select-option :value="ReuqestMethod.PUT"
            >{{ ReuqestMethod.PUT }}
          </a-select-option>
          <a-select-option :value="ReuqestMethod.DELETE"
            >{{ ReuqestMethod.DELETE }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="请求地址参数">
        <JSONEditor
          @put-data="putParams"
          :data="config.config[config.currentIndex].request.params"
        ></JSONEditor>
        <!--        <a-textarea-->
        <!--          v-model:value="config.config[config.currentIndex].request.params"-->
        <!--          allow-clear-->
        <!--        />-->
      </a-form-item>
      <a-form-item label="请求体参数">
        <JSONEditor
          @put-data="putData"
          :data="config.config[config.currentIndex].request.data"
        ></JSONEditor>
      </a-form-item>
      <a-form-item label="响应数据Keys">
        <a-input
          placeholder="响应体嵌套深，可以使用 . 进行进入深层次数据"
          v-model:value="config.config[config.currentIndex].request.responseKey"
        />
      </a-form-item>
    </a-form>
    <div>
      <a-button block @click="send" type="primary">发送请求</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useConfig } from "@/stores/datav/useConfig";
import { DataType, ReuqestMethod } from "@/stores/datav/types";
import { inject } from "vue";
import {
  PUT_DATA,
  SEND_REQUEST,
} from "@/components/viewEditor/typs/pubsubType";
import request from "@/utils/request";
import { AxiosResponse } from "axios";

import JSONEditor from "../JSONEditor/index.vue";

const config = useConfig();
const pubsub = inject("pubsub");
const send = () => {
  pubsub.publish(SEND_REQUEST);
  if (
    config.config[config.currentIndex].request.dataType === DataType.DYNAMIC
  ) {
    const vars = config.config[config.currentIndex].request.url.match(/[^\{\}]+(?=\})/g);
    let requestUrl = config.config[config.currentIndex].request.url;
    vars.forEach(key=>{
      console.log(new Function("return "+key)(),key)
      requestUrl.replace("${"+key+"}",new Function("return "+key)())
    });

    request
      .request({
        url: config.canvasConfig.requestPrefix + requestUrl,
        method: config.config[config.currentIndex].request.method,
        params: config.config[config.currentIndex].request.params,
        data: config.config[config.currentIndex].request.data,
      })
      .then((res: AxiosResponse<object>) => {
        const field =
          config.config[config.currentIndex].request.responseKey.split(".");
        let data;
        if (field.length > 1) {
          data = field.reduce((current: object, key: string) => {
            if (typeof current === "object") {
              return current[key as keyof typeof current];
            }
            return {};
          }, res);
        } else {
          data = res;
        }

        if (config.config[config.currentIndex].service.service) {
          console.log("执行service");
        } else {
          config.config[config.currentIndex].data = data;
          pubsub.publish(PUT_DATA);
        }
      });
  }
};

const putParams = (data: { [key: string]: string }) => {
  config.config[config.currentIndex].request.params = data;
};
const putData = (data: { [key: string]: string }) => {
  config.config[config.currentIndex].request.data = data;
};
</script>

<style lang="less" scoped>
.request-field {
  /deep/ .ant-switch {
    background-color: fade(@white, 50%);
  }

  /deep/ .ant-switch-checked {
    background-color: @primary-color;
  }
}
</style>
